<template>
  <div class="charts_shadow" :style="{width:`${innerWidth *.319}px`}">
    <div class="until_title_charts">劳务监控</div>
    <div class="monitor_info" style="width: 100%;height: 80%">
      <div class="monitor_item relative">
        <div class="monitor_item_num ">
          {{Math.round(monitor_Info.totalNum)}}
        </div>
        <div class="monitor_item_des">累计进场人数</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up safe" v-if="monitor_Info.totalRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(monitor_Info.totalRate * 100).toFixed(1)}}%</span>
          </div>
          <div class="item_rate_down warning" v-if="monitor_Info.totalRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(monitor_Info.totalRate * 100).toFixed(1)}}%</span>
          </div>
        </div>
      </div>
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{Math.round(monitor_Info.dailyNumAvg)}}
        </div>
        <div class="monitor_item_des">日均进场人数</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up safe" v-if="monitor_Info.dailyNumRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(monitor_Info.dailyNumRate * 100).toFixed(1)}}%</span>
          </div>
          <div class="item_rate_down warning" v-if="monitor_Info.dailyNumRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(monitor_Info.dailyNumRate * 100).toFixed(1)}}%</span>
          </div>
        </div>
      </div>
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{(monitor_Info.workHourAvg).toFixed(1)}}
        </div>
        <div class="monitor_item_des">每日人均工时</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up safe" v-if="monitor_Info.workHourRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(monitor_Info.workHourRate * 100).toFixed(1)}}%</span>
          </div>
          <div class="item_rate_down warning" v-if="monitor_Info.workHourRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(monitor_Info.workHourRate * 100).toFixed(1)}}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from './../mixin'
  import {mapGetters} from 'vuex'
  export default {
    name: 'labor_monitor',
    mixins: [mixin],
    data () {
      return {
        monitor_Info: {
          dailyNumAvg: 0,
          dailyNumRate: 0,
          totalNum: 0,
          totalRate: 0,
          workHourAvg: 0,
          workHourRate: 0
        }
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    watch: {
      currentUser (oldItem, newItem) {
        if (this.currentUser.mid) {
          this.getLaborMonitorInfo()
        }
      }
    },
    mounted () {
      this.getLaborMonitorInfo()
    },
    methods: {
      getLaborMonitorInfo () {
        let data = {
          stageId: this.currentUser.stageId,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getLaborMonitorInfo`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (!res.data.data) {
            this.monitor_Info.dailyNumAvg = 0
            this.monitor_Info.dailyNumRate = 0
            this.monitor_Info.totalNum = 0
            this.monitor_Info.totalRate = 0
            this.monitor_Info.workHourAvg = 0
            this.monitor_Info.workHourRate = 0
            return
          }
          let data = res.data.data
          this.monitor_Info.dailyNumAvg = data.dailyNumAvg
          this.monitor_Info.dailyNumRate = data.dailyNumRate
          this.monitor_Info.totalNum = data.totalNum
          this.monitor_Info.totalRate = data.totalRate
          this.monitor_Info.workHourAvg = data.workHourAvg
          this.monitor_Info.workHourRate = data.workHourRate
        })
      }
    }
  }
</script>

<style lang="scss">
  .charts_shadow {
    .monitor_info {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      .monitor_item {
        &:nth-child(3) {
          .monitor_item_rate{
            right: -50px;
          }
        }
        .monitor_item_num {
          font-weight:bold;
          color:rgba(0,232,255,1);
          text-shadow:0px 2px 3px rgba(0, 0, 0, 0.34);
          font-size:48px;
          padding-bottom: 10px;
          text-align: center;
        }
        .monitor_item_rate {
          position: absolute;
          top: 0;
          right: -50%;
          .safe {
            color:rgba(0,255,86,1);
          }
          .warning {
            color:rgba(231,70,70,1);
          }
          .rate_up_num {
            font-size:12px;
            font-weight:400;
          }
        }
        .monitor_item_des {
          font-size:16px;
          color:rgba(215,227,242,1);
          text-align: center;
        }
      }
    }
  }

</style>
